<template>
  <el-card class="box-card">
    <div>上架</div>
    <el-divider></el-divider>
   <div class="form">
      <el-form  class="demo-ruleForm" label-width="220px" :rules="rules" ref="onPickingRuleForm">
        <el-form-item label="出库订单号:" prop="barCode">
          <el-select v-model="outStorehouseId" placeholder="请选择" clearable>
            <el-option
              v-for="item in outStorehouseIdList"
              :key="item"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-plus" class="btm" @click="picking">拣货</el-button>

    </div>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      user: '',
      outStorehouseIdList: [],
      outStorehouseId: '',
      rules: {
        outStorehouseId: [
          { required: true, message: '请输入条码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getOptions () {
      const { data: result } = await this.$http.get('/picking/getOptions')
      if (result.status !== 200) return this.$message.error('获取列表失败')
      this.outStorehouseIdList = result.data
    },

    async picking () {
      const { data: result } = await this.$http.put('/picking/picking', { outStorehouseId: this.outStorehouseId, user: this.user })
      if (result.status !== 200) return this.$message.error('领取任务失败')
      this.$message.success('成功领取任务')
      this.$refs.onPickingRuleForm.resetfields()
    }

  },
  mounted () {
    this.getOptions()
    this.user = window.sessionStorage.getItem('token').substr(32)
  }
}
</script>

<style>
  .box-card{
    height: 95%;
    width: 95%;

  }
  .form{
    position: absolute;
    top: 40%;
    left: 35%;
    /* right: 20%; */
  }
  .btm{
    /* align-items: center; */
    position: absolute;
    left: 60%;
  }
</style>
